import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Image, StyleSheet } from 'react-native';

import HomeView from "../views/tabbar/HomeView";
import MessageView from "../views/tabbar/MessageView";
import MineView from "../views/tabbar/MineView";

import res from "../res";

const BottomTabs = () => {

    const Tab = createBottomTabNavigator();

    return (
        <Tab.Navigator
            screenOptions={({ }) => ({
                // headerShown: false,
                tabBarActiveTintColor: '#13227a',
            })}
        >
            <Tab.Screen
                name="HomeView"
                component={HomeView}
                options={{
                    title: '首页',
                    // tabBarBadge: 3,
                    tabBarIcon: ({ color, size, focused }) => {
                        return (
                            <Image
                                style={styles.icon}
                                source={focused ? res.home_s : res.home_n}
                            ></Image>
                        )
                    },
                }}
            ></Tab.Screen>
            <Tab.Screen
                name="MessageView"
                component={MessageView}
                options={{
                    title: '消息',
                    // headerShown: false,
                    tabBarIcon: ({ color, size, focused }) => {
                        return (
                            <Image
                                style={styles.icon}
                                source={focused ? res.message_s : res.message_n}
                            ></Image>
                        )
                    },
                }}
            ></Tab.Screen>            
            <Tab.Screen
                name="MineView"
                component={MineView}
                options={{
                    title: '我',
                    tabBarIcon: ({ color, size, focused }) => {
                        return (
                            <Image
                                style={styles.icon}
                                source={focused ? res.mine_s : res.mine_n}
                            ></Image>
                        )
                    },
                }}
            ></Tab.Screen>
        </Tab.Navigator>
    )
}

const styles = StyleSheet.create({
    icon: {
        width: 20,
        height: 20,
        resizeMode: 'contain',
    },

    // headerRight: {
    //   paddingRight: 15,
    // },

});


export default BottomTabs;